import React, { useEffect, useState } from 'react'
import { Stepper, Selector, Button } from 'react-vant'
import { Calendar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import '../../css/yjh/Apps.css'
import { useLocation } from 'react-router-dom'
export default function Appointment() {
    const location = useLocation()
    const { totalprice } = location.state
    const defaultSingle = new Date('2025-03-14')
    const [value8, setValue8] = useState(1)
    const navgiter = useNavigate()
    const gotoAddress = () => {
        navgiter('/address', {state: {totalprice:totalprice,}})
    }
    const gotoCoup = () => {
        navgiter('/coupon', {state: {totalprice:totalprice,}})
    }
    const selectedCoupon = JSON.parse(localStorage.getItem('selectedCoupon'));
    useEffect(() => {
        console.log(totalprice);
        
    }, [])
    return (
        <div>
            <h5 className='Dates'>选择日期</h5>
            <div className='SelectDate'>
                <Calendar
                    selectionMode='single'
                    className='calendar-custom'
                    defaultValue={defaultSingle}
                    onChange={val => {
                        console.log(val)
                    }}
                />
            </div>


            <div className='SelectHours'>
                <div className='Selects'>
                    <h5>工作小时数</h5>
                    <Stepper
                    className='Addmodel'
                        value={value8}
                        onChange={val => setValue8(val)}
                        theme='round'
                        buttonSize='22'
                        disableInput
                    />

                </div>


                <p>超出8小时需要支付额外费用</p>
            </div>


            <div className='SelectTimes'>
                <h5>选择开始时间</h5>
                <Selector
                className='Times'
                    options={[
                        {
                            label: '9:00AM',
                            value: '1',
                        },
                        {
                            label: '11:00AM',
                            value: '2',
                        },
                        {
                            label: '15:30PM',
                            value: '3',
                        },
                        {
                            label: '18:30PM',
                            value: '4',
                        },
                    ]}
                />

            </div>

            <div className='SelectCoupons'>
                <h5>优惠券</h5>
                <div className='coupons'>
                    {selectedCoupon ? <div className='ok'>
                        <p>{selectedCoupon.name}</p>
                        <Button round type='info' onClick={() => { gotoCoup() }}>+</Button>
                    </div> :
                        <div className='nook'>
                            <p>请选择优惠券</p>
                            <Button round type='info' onClick={() => { gotoCoup() }}>+</Button>
                        </div>
                    }

                </div>




            </div>


            <div className='Next'>

                {selectedCoupon ? <div>
                    <Button onClick={() => { gotoAddress() }}>下一步-￥{totalprice * selectedCoupon.price} </Button>
                </div> :
                    <div>
                        <Button onClick={() => { gotoAddress() }}>下一步-￥{totalprice}</Button>
                    </div>
                }





            </div>





        </div>

    )
}
